<!doctype html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>「嘿！甘雨」角色培养计算器</title>
    <link rel="stylesheet" href="//unpkg.com/bootstrap@4.6.1/dist/css/bootstrap.min.css">
    <link rel="stylesheet" href="./assets/index.css">
    <script src="//unpkg.com/vue@3.2.45/dist/vue.global.js"></script>
    <script src="//unpkg.com/naive-ui@2.34.2/dist/index.js"></script>
    <script src="//unpkg.com/jquery@3.5.1/dist/jquery.slim.min.js"></script>
    <script src="//unpkg.com/bootstrap@4.6.1/dist/js/bootstrap.bundle.min.js"></script>
    <script src="//unpkg.com/axios@1.2.1/dist/axios.min.js"></script>
</head>
<body>
<div id="app">
    <n-config-provider :locale="zhCN" :date-locale="dateZhCN">
        <div class="p-1">
            <n-card title="「嘿！甘雨」角色培养计算器">
                <div class="table_wrapper">
                    <n-space>
                        <n-button @click="addRoleClick()" type="primary">添加角色</n-button>
                        <n-button @click="saveComputedList()" type="primary">保存数据</n-button>
                        <n-popconfirm @positive-click="deleteComputedList()">
                            <template #trigger>
                                <n-button type="error">清空数据</n-button>
                            </template>
                            确认清空所有数据？
                        </n-popconfirm>
                    </n-space>
                    <div v-if="!!main_data" class="mt-2">
                        <div class="table_header_wrapper">
                            <n-table striped :single-line="false" size="small">
                                <n-thead>
                                    <n-tr>
                                        <n-th width="220">角色</n-th>
                                        <n-th width="275">突破</n-th>
                                        <n-th width="275">天赋</n-th>
                                        <n-th width="275">武器</n-th>
                                        <n-th width="170">圣遗物</n-th>
                                        <n-th>操作</n-th>
                                    </n-tr>
                                </n-thead>
                            </n-table>
                        </div>
                        <n-scrollbar style="max-height: calc(100vh - 160px)" trigger="none">
                            <n-table striped :single-line="false" size="small">
                                <n-thead>
                                    <n-tr>
                                        <n-th width="220">角色</n-th>
                                        <n-th width="275">突破</n-th>
                                        <n-th width="275">天赋</n-th>
                                        <n-th width="275">武器</n-th>
                                        <n-th width="170">圣遗物</n-th>
                                        <n-th>操作</n-th>
                                    </n-tr>
                                </n-thead>
                                <n-tbody>
                                    <n-tr v-for="(i,k) in computed_list" :key="k">
                                        <n-td>
                                            <div @click="editRole(i,k,'role')">
                                                <div class="role_list_wrapper" v-if="i.role">
                                                    <div class="role_list_icon_wrapper">
                                                        <img :src="i.role.image" :alt="i.role.name">
                                                    </div>
                                                    <div class="role_list_name_wrapper"><b>{{ i.role.name }}</b></div>
                                                </div>
                                                <div class="role_list_wrapper" v-else>
                                                    <div class="role_list_icon_wrapper">?</div>
                                                    <div class="role_list_name_wrapper"><b>暂未设置</b></div>
                                                </div>
                                            </div>
                                        </n-td>
                                        <n-td>
                                            <n-space v-if="i.role" align="center">
                                                <div>
                                                    <n-switch v-model:value="i.role_status" :round="false"/>
                                                </div>
                                                <div class="list_item_pointer_wrapper">
                                                    <n-tooltip placement="right" trigger="hover">
                                                        <template #trigger>
                                                            <n-grid :cols="2">
                                                                <template
                                                                        v-for="(ii,kk) in roleUpListComputed(roleUpComputed(i))"
                                                                        :key="kk">
                                                                    <n-gi>
                                                                        <div class="list_item_wrapper" v-if="!!ii">
                                                                            <div class="list_item_icon_wrapper">
                                                                                <img :src="main_data[kk][ii]" :alt="ii">
                                                                            </div>
                                                                            <div class="list_item_name_wrapper">{{ ii }}</div>
                                                                        </div>
                                                                    </n-gi>
                                                                </template>
                                                            </n-grid>
                                                        </template>
                                                        <div>
                                                            <n-grid x-gap="2" :cols="5">
                                                                <template v-for="(ii,kk) in roleUpComputed(i)" :key="kk">
                                                                    <template v-if="kk==='stone' || kk==='monster'">
                                                                        <n-gi v-for="(iii,kkk) in ii" :key="kkk">
                                                                            <img class="item_count_image_wrapper"
                                                                                 :src="main_data[kk][kkk]"
                                                                                 :alt="kkk">
                                                                            <b>x{{ iii }}</b>
                                                                        </n-gi>
                                                                    </template>
                                                                    <template
                                                                            v-if="(kk==='boss' || kk==='pick') && ii.count > 0">
                                                                        <n-gi>
                                                                            <div v-if="!!ii.name">
                                                                                <img class="item_count_image_wrapper"
                                                                                     :src="main_data[kk][ii.name]"
                                                                                     :alt="ii.name">
                                                                                <b>x{{ ii.count }}</b>
                                                                            </div>
                                                                        </n-gi>
                                                                    </template>
                                                                </template>
                                                            </n-grid>
                                                        </div>
                                                    </n-tooltip>
                                                </div>
                                            </n-space>
                                        </n-td>
                                        <n-td>
                                            <n-space v-if="i.role" align="center">
                                                <div>
                                                    <n-switch v-model:value="i.skill_status" :round="false"/>
                                                </div>
                                                <div class="list_item_pointer_wrapper">
                                                    <n-tooltip placement="right" trigger="hover">
                                                        <template #trigger>
                                                            <n-grid :cols="2">
                                                                <template
                                                                        v-for="(ii,kk) in skillUpListComputed([ skillUpComputed('a',i), skillUpComputed('e',i), skillUpComputed('q',i)])"
                                                                        :key="kk">
                                                                    <n-gi>
                                                                        <div class="list_item_wrapper" v-if="!!ii">
                                                                            <div class="list_item_icon_wrapper">
                                                                                <img :src="main_data[kk][ii]" :alt="ii">
                                                                            </div>
                                                                            <div class="list_item_name_wrapper">{{ ii }}</div>
                                                                        </div>
                                                                    </n-gi>
                                                                </template>
                                                            </n-grid>
                                                        </template>
                                                        <div>
                                                            <template v-for="(ti,tk) in ['q','e','a']" :key="tk">
                                                                <n-space v-if="i.skill_up[ti].order > 0" align="center">
                                                                    <div>{{ ti }}</div>
                                                                    <div v-for="(ii,kk) in skillUpComputed(ti,i)" :key="kk">
                                                                        <div v-if="kk==='book' || kk==='monster'">
                                                                            <n-space align="center">
                                                                                <div class="item_count_number_wrapper"
                                                                                     v-for="(iii,kkk) in ii"
                                                                                     :key="kkk">
                                                                                    <n-space align="center">
                                                                                        <img class="item_count_image_wrapper"
                                                                                             :src="main_data[kk][kkk]"
                                                                                             :alt="kkk">
                                                                                        <b>x{{ iii }}</b>
                                                                                    </n-space>
                                                                                </div>
                                                                            </n-space>
                                                                        </div>
                                                                        <div class="item_count_number_wrapper"
                                                                             v-if="kk==='week' && ii.count > 0">
                                                                            <n-space align="center">
                                                                                <img class="item_count_image_wrapper"
                                                                                     :src="main_data[kk][ii.name]"
                                                                                     :alt="ii.name">
                                                                                <b>x{{ ii.count }}</b>
                                                                            </n-space>
                                                                        </div>
                                                                        <div class="item_count_number_wrapper"
                                                                             v-if="kk==='crown' && ii > 0">
                                                                            <n-space align="center">
                                                                                <img class="item_count_image_wrapper"
                                                                                     :src="main_data[kk]"
                                                                                     alt="智识之冕">
                                                                                <b>x{{ ii }}</b>
                                                                            </n-space>
                                                                        </div>
                                                                    </div>
                                                                </n-space>
                                                            </template>
                                                        </div>
                                                    </n-tooltip>
                                                </div>
                                            </n-space>
                                        </n-td>
                                        <n-td>
                                            <n-space v-if="i.weapon" align="center">
                                                <div>
                                                    <n-switch v-model:value="i.weapon_status" :round="false"/>
                                                </div>
                                                <div class="list_item_pointer_wrapper">
                                                    <n-tooltip placement="right" trigger="hover">
                                                        <template #trigger>
                                                            <n-grid :cols="2">
                                                                <n-gi>
                                                                    <div @click="editRole(i,k,'weapon')"
                                                                         class="list_item_wrapper">
                                                                        <div class="list_item_icon_wrapper">
                                                                            <img :src="i.weapon.image" :alt="i.weapon.name">
                                                                        </div>
                                                                        <div class="list_item_name_wrapper">{{ i.weapon.name
                                                                            }}
                                                                        </div>
                                                                    </div>
                                                                </n-gi>
                                                                <template
                                                                        v-for="(ii,kk) in weaponUpListComputed(weaponUpComputed(i))"
                                                                        :key="kk">
                                                                    <n-gi>
                                                                        <div class="list_item_wrapper" v-if="!!ii">
                                                                            <div class="list_item_icon_wrapper">
                                                                                <img :src="main_data[kk][ii]" :alt="ii">
                                                                            </div>
                                                                            <div class="list_item_name_wrapper">{{ ii }}</div>
                                                                        </div>
                                                                    </n-gi>
                                                                </template>
                                                            </n-grid>
                                                        </template>
                                                        <div>
                                                            <n-grid x-gap="2" :cols="5">
                                                                <template v-for="(ii,kk) in weaponUpComputed(i)" :key="kk">
                                                                    <n-gi v-for="(iii,kkk) in ii" :key="kkk">
                                                                        <img class="item_count_image_wrapper"
                                                                             :src="main_data[kk][kkk]"
                                                                             :alt="kkk">
                                                                        <b>x{{ iii }}</b>
                                                                    </n-gi>
                                                                </template>
                                                            </n-grid>
                                                        </div>
                                                    </n-tooltip>
                                                </div>
                                            </n-space>
                                            <div v-else>
                                                <div @click="editRole(i,k,'weapon')" class="role_list_wrapper">
                                                    <div class="role_list_icon_wrapper">?</div>
                                                    <div class="role_list_name_wrapper"><b>暂未设置</b></div>
                                                </div>
                                            </div>
                                        </n-td>
                                        <n-td>
                                            <n-space align="center">
                                                <div>
                                                    <n-switch v-model:value="i.artifact_status" :round="false"/>
                                                </div>
                                                <div>
                                                    <n-tooltip placement="right" trigger="hover">
                                                        <template #trigger>
                                                            <n-grid :cols="1">
                                                                <n-gi v-if="i.artifact.a">
                                                                    <div @click="editRole(i,k,'artifact','a')"
                                                                         class="list_item_wrapper list_item_pointer_wrapper">
                                                                        <div class="list_item_icon_wrapper">
                                                                            <img :src="i.artifact.a.image"
                                                                                 :alt="i.artifact.a.name">
                                                                        </div>
                                                                        <div class="list_item_name_wrapper">{{ i.artifact.a.name
                                                                            }}
                                                                        </div>
                                                                    </div>
                                                                </n-gi>
                                                                <n-gi v-else>
                                                                    <div @click="editRole(i,k,'artifact','a')"
                                                                         class="list_item_wrapper list_item_pointer_wrapper">
                                                                        <div class="list_item_icon_wrapper">?</div>
                                                                        <div class="list_item_name_wrapper">暂未设置</div>
                                                                    </div>
                                                                </n-gi>
                                                                <n-gi v-if="i.artifact.b">
                                                                    <div @click="editRole(i,k,'artifact','b')"
                                                                         class="list_item_wrapper list_item_pointer_wrapper">
                                                                        <div class="list_item_icon_wrapper">
                                                                            <img :src="i.artifact.b.image"
                                                                                 :alt="i.artifact.b.name">
                                                                        </div>
                                                                        <div class="list_item_name_wrapper">{{ i.artifact.b.name
                                                                            }}
                                                                        </div>
                                                                    </div>
                                                                </n-gi>
                                                                <n-gi v-else>
                                                                    <div @click="editRole(i,k,'artifact','b')"
                                                                         class="list_item_wrapper list_item_pointer_wrapper">
                                                                        <div class="list_item_icon_wrapper">?</div>
                                                                        <div class="list_item_name_wrapper">暂未设置</div>
                                                                    </div>
                                                                </n-gi>
                                                            </n-grid>
                                                        </template>
                                                        <div>
                                                            <n-table :single-line="false" size="small" class="text-center">
                                                                <thead>
                                                                <n-tr>
                                                                    <n-th>时之沙</n-th>
                                                                    <n-th>空之杯</n-th>
                                                                    <n-th>理之冠</n-th>
                                                                </n-tr>
                                                                </thead>
                                                                <tbody>
                                                                <n-tr>
                                                                    <n-td>{{ i.artifact_type.s ? i.artifact_type.s : '-' }}
                                                                    </n-td>
                                                                    <n-td>{{ i.artifact_type.b ? i.artifact_type.b : '-' }}
                                                                    </n-td>
                                                                    <n-td>{{ i.artifact_type.g ? i.artifact_type.g : '-' }}
                                                                    </n-td>
                                                                </n-tr>
                                                                <n-tr>
                                                                    <n-th colspan="3">副词条</n-th>
                                                                </n-tr>
                                                                <n-tr>
                                                                    <n-td colspan="3">
                                                                        {{ i.artifact_type.f.length > 0 ? i.artifact_type.f.join(' ') : '-'
                                                                        }}
                                                                    </n-td>
                                                                </n-tr>
                                                                </tbody>
                                                            </n-table>
                                                        </div>
                                                    </n-tooltip>
                                                </div>
                                            </n-space>
                                        </n-td>
                                        <n-td>
                                            <n-space>
                                                <n-button @click="editRole(i,k)" type="primary">编辑角色</n-button>
                                                <n-popconfirm @positive-click="removeRole(k)">
                                                    <template #trigger>
                                                        <n-button type="error">移除角色</n-button>
                                                    </template>
                                                    确认删除该条数据？
                                                </n-popconfirm>
                                                <n-button :disabled="k === 0" @click="upRole(k)" type="info">↑</n-button>
                                                <n-button :disabled="k === computed_list.length - 1" @click="downRole(k)"
                                                          type="info">↓
                                                </n-button>
                                            </n-space>
                                        </n-td>
                                    </n-tr>
                                </n-tbody>
                            </n-table>
                        </n-scrollbar>
                    </div>
                </div>
            </n-card>

            <n-drawer v-model:show="role_info_show" :height="760" placement="bottom" :auto-focus="false">
                <n-drawer-content title="编辑角色" closable>
                    <div v-if="!!active_item" class="p-1">
                        <n-table class="mt-1 text-center" :single-line="false">
                            <n-thead>
                                <n-tr>
                                    <n-th width="200">
                                        <n-popconfirm @positive-click="removeRole(active_key)">
                                            <template #trigger>
                                                <n-button type="error">移除角色</n-button>
                                            </template>
                                            确认删除该条数据？
                                        </n-popconfirm>
                                    </n-th>
                                    <n-th width="120"></n-th>
                                    <n-th width="200" colspan="2">等级</n-th>
                                    <n-th width="80">顺序</n-th>
                                    <n-th></n-th>
                                </n-tr>
                            </n-thead>
                            <n-tbody>
                                <n-tr>
                                    <n-td rowspan="4">
                                        <div @click="chooseRoleClick()" class="role_wrapper"
                                             v-if="active_item.role">
                                            <div class="role_icon_wrapper">
                                                <img :src="active_item.role.image" :alt="active_item.role.name">
                                            </div>
                                            <div class="role_name_wrapper"><b>{{ active_item.role.name }}</b></div>
                                        </div>
                                        <div @click="chooseRoleClick()" class="role_wrapper" v-else>
                                            <div class="role_icon_wrapper">?</div>
                                            <div class="role_name_wrapper"><b>点击选择角色</b></div>
                                        </div>
                                    </n-td>
                                    <n-th width="100">突破</n-th>
                                    <n-td>
                                        <n-input-number :disabled="!active_item.role" class="number_input_wrapper"
                                                        :min="1"
                                                        :max="active_item.role_up.end"
                                                        v-model:value="active_item.role_up.start"
                                                        button-placement="both"/>

                                    </n-td>
                                    <n-td>
                                        <n-input-number :disabled="!active_item.role" class="number_input_wrapper"
                                                        :min="active_item.role_up.start"
                                                        :max="90" v-model:value="active_item.role_up.end"
                                                        button-placement="both"/>
                                    </n-td>
                                    <n-td></n-td>
                                    <n-td>
                                        <div v-if="active_item.role">
                                            <div class="mt-2">
                                                <n-space align="center">
                                                    <div v-for="(i,k) in roleUpComputed()" :key="k">
                                                        <n-space v-if="k==='stone' || k==='monster'" align="center">
                                                            <div class="count_number_wrapper" v-for="(ii,kk) in i"
                                                                 :key="kk">
                                                                <n-space align="center">
                                                                    <img class="count_image_wrapper"
                                                                         :src="main_data[k][kk]"
                                                                         :alt="kk">
                                                                    <b>x{{ ii }}</b>
                                                                </n-space>
                                                            </div>
                                                        </n-space>
                                                        <div class="count_number_wrapper"
                                                             v-if="(k==='boss' || k==='pick') && i.count > 0 && !!i.name">
                                                            <n-space align="center">
                                                                <img class="count_image_wrapper"
                                                                     :src="main_data[k][i.name]"
                                                                     :alt="i.name">
                                                                <b>x{{ i.count }}</b>
                                                            </n-space>
                                                        </div>
                                                    </div>
                                                </n-space>
                                            </div>
                                        </div>
                                    </n-td>
                                </n-tr>
                                <n-tr>
                                    <n-th width="100">元素爆发(Q)</n-th>
                                    <n-td>
                                        <n-input-number :disabled="!active_item.role" class="number_input_wrapper"
                                                        :min="1"
                                                        :max="active_item.skill_up.q.end"
                                                        v-model:value="active_item.skill_up.q.start"
                                                        button-placement="both"/>
                                    </n-td>
                                    <n-td>
                                        <n-input-number :disabled="!active_item.role" class="number_input_wrapper"
                                                        :min="active_item.skill_up.q.start"
                                                        :max="10"
                                                        v-model:value="active_item.skill_up.q.end"
                                                        button-placement="both"/>
                                    </n-td>
                                    <n-td>
                                        <n-input-number :disabled="!active_item.role" class="number_input_wrapper"
                                                        v-model:value="active_item.skill_up.q.order"
                                                        button-placement="both"/>
                                    </n-td>
                                    <n-td>
                                        <n-space align="center" v-if="active_item.role">
                                            <div v-for="(i,k) in skillUpComputed('q')" :key="k">
                                                <div v-if="k==='book' || k==='monster'">
                                                    <n-space align="center">
                                                        <div class="count_number_wrapper" v-for="(ii,kk) in i"
                                                             :key="kk">
                                                            <n-space align="center">
                                                                <img class="count_image_wrapper"
                                                                     :src="main_data[k][kk]"
                                                                     :alt="kk">
                                                                <b>x{{ ii }}</b>
                                                            </n-space>
                                                        </div>
                                                    </n-space>
                                                </div>
                                                <div class="count_number_wrapper" v-if="k==='week' && i.count > 0">
                                                    <n-space align="center">
                                                        <img class="count_image_wrapper" :src="main_data[k][i.name]"
                                                             :alt="i.name">
                                                        <b>x{{ i.count }}</b>
                                                    </n-space>
                                                </div>
                                                <div class="count_number_wrapper" v-if="k==='crown' && i > 0">
                                                    <n-space align="center">
                                                        <img class="count_image_wrapper" :src="main_data[k]"
                                                             alt="智识之冕">
                                                        <b>x{{ i }}</b>
                                                    </n-space>
                                                </div>
                                            </div>
                                        </n-space>
                                    </n-td>
                                </n-tr>
                                <n-tr>
                                    <n-th width="100">元素战技(E)</n-th>
                                    <n-td>
                                        <n-input-number :disabled="!active_item.role" class="number_input_wrapper"
                                                        :min="1"
                                                        :max="active_item.skill_up.e.end"
                                                        v-model:value="active_item.skill_up.e.start"
                                                        button-placement="both"/>
                                    </n-td>
                                    <n-td>
                                        <n-input-number :disabled="!active_item.role" class="number_input_wrapper"
                                                        :min="active_item.skill_up.e.start"
                                                        :max="10"
                                                        v-model:value="active_item.skill_up.e.end"
                                                        button-placement="both"/>
                                    </n-td>
                                    <n-td>
                                        <n-input-number :disabled="!active_item.role" class="number_input_wrapper"
                                                        v-model:value="active_item.skill_up.e.order"
                                                        button-placement="both"/>
                                    </n-td>
                                    <n-td>
                                        <n-space align="center" v-if="active_item.role">
                                            <div v-for="(i,k) in skillUpComputed('e')" :key="k">
                                                <div v-if="k==='book' || k==='monster'">
                                                    <n-space align="center">
                                                        <div class="count_number_wrapper" v-for="(ii,kk) in i"
                                                             :key="kk">
                                                            <n-space align="center">
                                                                <img class="count_image_wrapper"
                                                                     :src="main_data[k][kk]"
                                                                     :alt="kk">
                                                                <b>x{{ ii }}</b>
                                                            </n-space>
                                                        </div>
                                                    </n-space>
                                                </div>
                                                <div class="count_number_wrapper" v-if="k==='week' && i.count > 0">
                                                    <n-space align="center">
                                                        <img class="count_image_wrapper" :src="main_data[k][i.name]"
                                                             :alt="i.name">
                                                        <b>x{{ i.count }}</b>
                                                    </n-space>
                                                </div>
                                                <div class="count_number_wrapper" v-if="k==='crown' && i > 0">
                                                    <n-space align="center">
                                                        <img class="count_image_wrapper" :src="main_data[k]"
                                                             alt="智识之冕">
                                                        <b>x{{ i }}</b>
                                                    </n-space>
                                                </div>
                                            </div>
                                        </n-space>
                                    </n-td>
                                </n-tr>
                                <n-tr>
                                    <n-th width="100">普通攻击(A)</n-th>
                                    <n-td>
                                        <n-input-number :disabled="!active_item.role" class="number_input_wrapper"
                                                        :min="1"
                                                        :max="active_item.skill_up.a.end"
                                                        v-model:value="active_item.skill_up.a.start"
                                                        button-placement="both"/>
                                    </n-td>
                                    <n-td>
                                        <n-input-number :disabled="!active_item.role" class="number_input_wrapper"
                                                        :min="active_item.skill_up.a.start"
                                                        :max="10"
                                                        v-model:value="active_item.skill_up.a.end"
                                                        button-placement="both"/>
                                    </n-td>
                                    <n-td>
                                        <n-input-number :disabled="!active_item.role" class="number_input_wrapper"
                                                        v-model:value="active_item.skill_up.a.order"
                                                        button-placement="both"/>
                                    </n-td>
                                    <n-td>
                                        <n-space align="center" v-if="active_item.role">
                                            <div v-for="(i,k) in skillUpComputed('a')" :key="k">
                                                <div v-if="k==='book' || k==='monster'">
                                                    <n-space align="center">
                                                        <div class="count_number_wrapper" v-for="(ii,kk) in i"
                                                             :key="kk">
                                                            <n-space align="center">
                                                                <img class="count_image_wrapper"
                                                                     :src="main_data[k][kk]"
                                                                     :alt="kk">
                                                                <b>x{{ ii }}</b>
                                                            </n-space>
                                                        </div>
                                                    </n-space>
                                                </div>
                                                <div class="count_number_wrapper" v-if="k==='week' && i.count > 0">
                                                    <n-space align="center">
                                                        <img class="count_image_wrapper" :src="main_data[k][i.name]"
                                                             :alt="i.name">
                                                        <b>x{{ i.count }}</b>
                                                    </n-space>
                                                </div>
                                                <div class="count_number_wrapper" v-if="k==='crown' && i > 0">
                                                    <n-space align="center">
                                                        <img class="count_image_wrapper" :src="main_data[k]"
                                                             alt="智识之冕">
                                                        <b>x{{ i }}</b>
                                                    </n-space>
                                                </div>
                                            </div>
                                        </n-space>
                                    </n-td>
                                </n-tr>
                                <n-tr>
                                    <n-td>
                                        <div @click="chooseWeaponClick()" class="weapon_wrapper"
                                             v-if="active_item.weapon">
                                            <div class="weapon_icon_wrapper">
                                                <img :src="active_item.weapon.image" :alt="active_item.weapon.name">
                                            </div>
                                            <div class="weapon_name_wrapper"><b>{{ active_item.weapon.name }}</b>
                                            </div>
                                        </div>
                                        <div @click="chooseWeaponClick()" class="weapon_wrapper" v-else>
                                            <div class="weapon_icon_wrapper">?</div>
                                            <div class="weapon_name_wrapper"><b>点击选择武器</b></div>
                                        </div>
                                    </n-td>
                                    <n-th width="100">突破</n-th>
                                    <n-td>
                                        <n-input-number :disabled="!active_item.weapon" class="number_input_wrapper"
                                                        :min="1"
                                                        :max="active_item.weapon_up.end"
                                                        v-model:value="active_item.weapon_up.start"
                                                        button-placement="both"/>
                                    </n-td>
                                    <n-td>
                                        <n-input-number :disabled="!active_item.weapon" class="number_input_wrapper"
                                                        :min="active_item.weapon_up.start"
                                                        :max="90" v-model:value="active_item.weapon_up.end"
                                                        button-placement="both"/>
                                    </n-td>
                                    <n-td>
                                    </n-td>
                                    <n-td>
                                        <div v-if="active_item.weapon">
                                            <n-space align="center">
                                                <div v-for="(i,k) in weaponUpComputed()" :key="k">
                                                    <div class="count_number_wrapper" v-for="(ii,kk) in i"
                                                         :key="kk">
                                                        <n-space align="center">
                                                            <img class="count_image_wrapper" :src="main_data[k][kk]"
                                                                 :alt="kk">
                                                            <b>x{{ ii }}</b>
                                                        </n-space>
                                                    </div>
                                                </div>
                                            </n-space>
                                        </div>
                                    </n-td>
                                </n-tr>

                                <n-tr>
                                    <n-td>
                                        <div @click="chooseArtifactClick('a')" class="weapon_wrapper"
                                             v-if="active_item.artifact.a">
                                            <div class="weapon_icon_wrapper">
                                                <img :src="active_item.artifact.a.image"
                                                     :alt="active_item.artifact.a.name">
                                            </div>
                                            <div class="weapon_name_wrapper"><b>{{ active_item.artifact.a.name
                                                }}</b>
                                            </div>
                                        </div>
                                        <div @click="chooseArtifactClick('a')" class="weapon_wrapper" v-else>
                                            <div class="weapon_icon_wrapper">?</div>
                                            <div class="weapon_name_wrapper"><b>点击选择圣遗物</b></div>
                                        </div>
                                    </n-td>
                                    <n-th width="100">时之沙</n-th>
                                    <n-th width="100">空之杯</n-th>
                                    <n-th width="100">理之冠</n-th>
                                    <n-th colspan="2">副词条</n-th>
                                </n-tr>
                                <n-tr>
                                    <n-td>
                                        <div @click="chooseArtifactClick('b')" class="weapon_wrapper"
                                             v-if="active_item.artifact.b">
                                            <div class="weapon_icon_wrapper">
                                                <img :src="active_item.artifact.b.image"
                                                     :alt="active_item.artifact.b.name">
                                            </div>
                                            <div class="weapon_name_wrapper"><b>{{ active_item.artifact.b.name
                                                }}</b>
                                            </div>
                                        </div>
                                        <div @click="chooseArtifactClick('b')" class="weapon_wrapper" v-else>
                                            <div class="weapon_icon_wrapper">?</div>
                                            <div class="weapon_name_wrapper"><b>点击选择圣遗物</b></div>
                                        </div>
                                    </n-td>
                                    <n-td>
                                        <n-select v-model:value="active_item.artifact_type.s"
                                                  :options="[...artifact_type.p,...artifact_type.s]"/>
                                    </n-td>
                                    <n-td>
                                        <n-select v-model:value="active_item.artifact_type.b"
                                                  :options="[...artifact_type.p,...artifact_type.b]"/>
                                    </n-td>
                                    <n-td>
                                        <n-select v-model:value="active_item.artifact_type.g"
                                                  :options="[...artifact_type.p,...artifact_type.g]"/>
                                    </n-td>
                                    <n-td colspan="2">
                                        <n-select v-model:value="active_item.artifact_type.f" multiple
                                                  :options="artifact_type.f"/>
                                    </n-td>
                                </n-tr>
                            </n-tbody>
                        </n-table>
                    </div>
                </n-drawer-content>

            </n-drawer>
            <n-drawer v-model:show="choose_role_show" :width="600" placement="right">
                <n-drawer-content title="选择角色">
                    <n-space>
                        <div @click="chooseThisRoleClick(i)"
                             :class="[!!active_item && active_item.role.id === i.id ? 'choose_active_wrapper' : '']"
                             class="choose_wrapper" v-for="(i,k) in main_data.role" :key="k">
                            <div class="choose_icon_wrapper">
                                <img :src="i.image" :alt="i.name">
                            </div>
                            <div class="choose_name_wrapper"><b>{{ i.name }}</b></div>
                        </div>
                    </n-space>
                </n-drawer-content>
            </n-drawer>

            <n-drawer v-model:show="choose_weapon_show" :width="600" placement="right">
                <n-drawer-content title="选择武器">
                    <n-space>
                        <div @click="chooseThisWeaponClick(i)"
                             :class="[!!active_item && active_item.weapon.id === i.id ? 'choose_active_wrapper' : '']"
                             class="choose_wrapper" v-for="(i,k) in main_data.weapon" :key="k">
                            <div class="choose_icon_wrapper">
                                <img :src="i.image" :alt="i.name">
                            </div>
                            <div class="choose_name_wrapper"><b>{{ i.name }}</b></div>
                        </div>
                    </n-space>
                </n-drawer-content>
            </n-drawer>

            <n-drawer v-model:show="choose_artifact_show" :width="600" placement="right">
                <n-drawer-content title="选择圣遗物">
                    <n-space>
                        <div @click="chooseThisArtifactClick(i)"
                             :class="[!!active_item && active_item.artifact[active_type].id === i.id ? 'choose_active_wrapper' : '']"
                             class="choose_wrapper" v-for="(i,k) in main_data.artifact" :key="k">
                            <div class="choose_icon_wrapper">
                                <img :src="i.image" :alt="i.name">
                            </div>
                            <div class="choose_name_wrapper"><b>{{ i.name }}</b></div>
                        </div>
                    </n-space>
                </n-drawer-content>
            </n-drawer>
        </div>
    </n-config-provider>
</div>

<script>
    const {zhCN, dateZhCN} = naive
    const {createApp, onMounted, ref, computed} = Vue
    const App = {
        setup() {
            onMounted(() => {
                getMainData()
            })
            const computed_list = ref([])
            const computed_list_push = {
                role: false,
                weapon: false,
                artifact: {
                    a: false,
                    b: false,
                },
                artifact_type: {
                    s: null,
                    b: null,
                    g: null,
                    f: []
                },
                role_status: false,
                skill_status: false,
                weapon_status: false,
                artifact_status: false,
                role_up: {start: 1, end: 70},
                weapon_up: {start: 1, end: 70},
                skill_up: {
                    a: {start: 1, end: 7, order: 3},
                    e: {start: 1, end: 7, order: 2},
                    q: {start: 1, end: 7, order: 1},
                },
            }
            const main_data = ref(false)
            const choose_role_show = ref(false)
            const choose_weapon_show = ref(false)
            const choose_artifact_show = ref(false)
            const role_info_show = ref(false)
            const getMainData = async () => {
                const response = await axios.get('./data.json')
                main_data.value = response.data
                getComputedList()
            }
            const getComputedList = () => {
                const cl = localStorage.getItem('COMPUTED_LIST')
                computed_list.value = !!cl ? JSON.parse(cl).map((item) => {
                    return {
                        ...computed_list_push.value,
                        ...item
                    }
                }) : []
            }
            const active_key_default = -1
            const active_key = ref(JSON.parse(JSON.stringify(active_key_default)))
            const active_item_default = false
            const active_item = ref(JSON.parse(JSON.stringify(active_item_default)))
            const active_type = ref('a')
            const chooseRoleClick = () => {
                choose_role_show.value = true
            }
            const chooseWeaponClick = () => {
                choose_weapon_show.value = true
            }
            const chooseArtifactClick = (type) => {
                active_type.value = type
                choose_artifact_show.value = true
            }

            const roleUpListComputed = computed(() => (info) => {
                let ret = {
                    stone: '',
                    boss: info.boss.name,
                    pick: info.pick.name,
                    monster: '',
                }
                for (let i in info.stone) ret.stone = i
                for (let i in info.monster) ret.monster = i
                return ret
            })

            const getRoleUpLevel = (start, end) => {
                let level_arr = [20, 40, 50, 60, 70, 80]
                let ret = []
                for (let i in level_arr) {
                    if (level_arr[i] >= start && level_arr[i] <= end) ret.push(Number(i))
                }
                return ret
            }
            const roleUpComputed = computed(() => (info = false) => {
                let {role, role_up} = info ? info : active_item.value
                let level_arr = getRoleUpLevel(role_up.start, role_up.end)
                let role_up_count = []
                for (let i in level_arr) {
                    role_up_count.push(main_data.value.count.up[level_arr[i]])
                }
                let ret = {
                    stone: {},
                    boss: {name: role.boss, count: 0},
                    pick: {name: role.pick, count: 0},
                    monster: {},
                }
                for (let i in role_up_count) {
                    let stone_name = role.stone[role_up_count[i].stone[0] - 2]
                    if (!ret.stone[stone_name]) ret.stone[stone_name] = 0
                    ret.stone[stone_name] = ret.stone[stone_name] + role_up_count[i].stone[1]
                    ret.pick.count = ret.pick.count + role_up_count[i].pick
                    ret.boss.count = ret.boss.count + role_up_count[i].boss
                    let monster_name = role.monster[role_up_count[i].monster[0] - 1]
                    if (!ret.monster[monster_name]) ret.monster[monster_name] = 0
                    ret.monster[monster_name] = ret.monster[monster_name] + role_up_count[i].monster[1]
                }
                return ret
            })
            const getWeaponUpLevel = (start, end) => {
                let level_arr = [20, 40, 50, 60, 70, 80]
                let ret = []
                for (let i in level_arr) {
                    if (level_arr[i] >= start && level_arr[i] <= end) ret.push(Number(i))
                }
                return ret
            }
            const weaponUpListComputed = computed(() => (info) => {
                let ret = {
                    item: '',
                    elite: '',
                    monster: '',
                }
                for (let i in info.item) ret.item = i
                for (let i in info.elite) ret.elite = i
                for (let i in info.monster) ret.monster = i
                return ret
            })
            const weaponUpComputed = computed(() => (info = false) => {
                let {weapon, weapon_up} = info ? info : active_item.value
                let level_arr = getWeaponUpLevel(weapon_up.start, weapon_up.end)
                let weapon_up_count = []
                let type_arr = ['一星', '二星', '三星', '四星', '五星']
                for (let i in level_arr) {
                    weapon_up_count.push(main_data.value.count.weapon[type_arr.indexOf(weapon.level)][level_arr[i]])
                }
                let ret = {
                    item: {},
                    elite: {},
                    monster: {},
                }
                for (let i in weapon_up_count) {
                    let item_name = weapon.item[weapon_up_count[i].item[0] - 2]
                    if (!ret.item[item_name]) ret.item[item_name] = 0
                    ret.item[item_name] = ret.item[item_name] + weapon_up_count[i].item[1]
                    let elite_name = weapon.elite[weapon_up_count[i].elite[0] - 2]
                    if (!ret.elite[elite_name]) ret.elite[elite_name] = 0
                    ret.elite[elite_name] = ret.elite[elite_name] + weapon_up_count[i].elite[1]
                    let monster_name = weapon.monster[weapon_up_count[i].monster[0] - 1]
                    if (!ret.monster[monster_name]) ret.monster[monster_name] = 0
                    ret.monster[monster_name] = ret.monster[monster_name] + weapon_up_count[i].monster[1]
                }
                return ret
            })
            const getSkillUpLevel = (start, end) => {
                let level_arr = [2, 3, 4, 5, 6, 7, 8, 9, 10]
                let ret = []
                for (let i in level_arr) {
                    if (level_arr[i] >= start && level_arr[i] <= end) ret.push(Number(i))
                }
                return ret
            }
            const skillUpComputed = computed(() => (type, info = false) => {
                let {role, skill_up} = info ? info : active_item.value
                let ret = {
                    book: {},
                    monster: {},
                    week: {name: '', count: 0},
                    crown: 0,
                }
                let level_arr = getSkillUpLevel(skill_up[type].start, skill_up[type].end)
                let skill_up_count = []
                let role_skill_count = []
                for (let i in level_arr) {
                    skill_up_count.push(main_data.value.count.skill[level_arr[i]])
                    role_skill_count.push(role.skill[level_arr[i]])
                }
                for (let i in role_skill_count) {
                    let book_name = role_skill_count[i].book
                    if (!ret.book[book_name]) ret.book[book_name] = 0
                    ret.book[book_name] = ret.book[book_name] + skill_up_count[i].book
                    let monster_name = role_skill_count[i].monster
                    if (!ret.monster[monster_name]) ret.monster[monster_name] = 0
                    ret.monster[monster_name] = ret.monster[monster_name] + skill_up_count[i].monster
                    if (!!role_skill_count[i].week) {
                        ret.week.name = role_skill_count[i].week
                        ret.week.count = ret.week.count + skill_up_count[i].week
                    }
                    if (Number(level_arr[i]) === 7) ret.crown = ret.crown + 1
                }
                return ret
            })
            const skillUpListComputed = computed(() => ([a, e, q]) => {
                let ret = {
                    book: '',
                    monster: '',
                    week: '',
                }
                let book_name = ''
                let book_max = 0
                let book_count = 0
                for (let i in a.book) {
                    book_count++
                    book_name = i
                }
                if (book_max < book_count) {
                    book_max = book_count
                    ret.book = book_name
                }
                book_count = 0
                for (let i in e.book) {
                    book_count++
                    book_name = i
                }
                if (book_max < book_count) {
                    book_max = book_count
                    ret.book = book_name
                }
                book_count = 0
                for (let i in q.book) {
                    book_count++
                    book_name = i
                }
                if (book_max < book_count) {
                    book_max = book_count
                    ret.book = book_name
                }
                let monster_name = ''
                let monster_max = 0
                let monster_count = 0
                for (let i in a.monster) {
                    monster_count++
                    monster_name = i
                }
                if (monster_max < monster_count) {
                    monster_max = monster_count
                    ret.monster = monster_name
                }
                monster_count = 0
                for (let i in e.monster) {
                    monster_count++
                    monster_name = i
                }
                if (monster_max < monster_count) {
                    monster_max = monster_count
                    ret.monster = monster_name
                }
                monster_count = 0
                for (let i in q.monster) {
                    book_count++
                    book_name = i
                }
                if (monster_max < monster_count) {
                    monster_max = monster_count
                    ret.monster = monster_name
                }
                if (!!a.week) ret.week = a.week.name
                if (!!e.week) ret.week = e.week.name
                if (!!q.week) ret.week = q.week.name
                return ret
            })
            const saveComputedList = () => {
                localStorage.setItem('COMPUTED_LIST', JSON.stringify(computed_list.value))
                getComputedList()
            }
            const editRole = (role, key, open = false, type = 'a') => {
                active_item.value = role
                active_key.value = key
                if (!!open) {
                    setTimeout(() => {
                        switch (open) {
                            case 'role':
                                choose_role_show.value = true
                                break;
                            case 'weapon':
                                choose_weapon_show.value = true
                                break;
                            case 'artifact':
                                active_type.value = type
                                choose_artifact_show.value = true
                                break;
                        }
                    }, 100)
                } else {
                    role_info_show.value = true
                }
            }
            return {
                skillUpListComputed,
                weaponUpListComputed,
                roleUpListComputed,
                skillUpComputed,
                roleUpComputed,
                weaponUpComputed,
                getComputedList,
                deleteComputedList: () => {
                    localStorage.removeItem('COMPUTED_LIST')
                    getComputedList()
                },
                saveComputedList,
                editRole,
                chooseThisRoleClick: (role) => {
                    let info = computed_list.value[active_key.value].role.id === role.id ? false : role
                    computed_list.value[active_key.value].role = info
                    active_item.value.role = info
                    choose_role_show.value = false
                },
                chooseThisWeaponClick: (weapon) => {
                    let info = computed_list.value[active_key.value].weapon.id === weapon.id ? false : weapon
                    computed_list.value[active_key.value].weapon = info
                    active_item.value.weapon = info
                    choose_weapon_show.value = false
                },
                chooseThisArtifactClick: (artifact) => {
                    let info = computed_list.value[active_key.value].artifact[active_type.value].id === artifact.id ? false : artifact
                    computed_list.value[active_key.value].artifact[active_type.value] = info
                    active_item.value.artifact[active_type.value] = info
                    choose_artifact_show.value = false
                },
                chooseRoleClick,
                chooseWeaponClick,
                chooseArtifactClick,
                addRoleClick: () => {
                    computed_list.value.unshift(JSON.parse(JSON.stringify(computed_list_push)))
                    editRole(computed_list.value[0], 0, 'role')
                },
                role_info_show,
                removeRole: (key) => {
                    computed_list.value.splice(key, 1)
                    role_info_show.value = false
                },
                upRole(key) {
                    if (key === 0) return
                    const info = JSON.parse(JSON.stringify(computed_list.value[key]))
                    computed_list.value[key] = JSON.parse(JSON.stringify(computed_list.value[key - 1]))
                    computed_list.value[key - 1] = info
                },
                downRole(key) {
                    if (key === computed_list.value.length - 1) return
                    const info = JSON.parse(JSON.stringify(computed_list.value[key]))
                    computed_list.value[key] = JSON.parse(JSON.stringify(computed_list.value[key + 1]))
                    computed_list.value[key + 1] = info
                },
                artifact_type: {
                    p: [{
                        value: '生命%', label: '生命%',
                    }, {
                        value: '防御%', label: '防御%',
                    }, {
                        value: '攻击%', label: '攻击%',
                    }, {
                        value: '精通', label: '精通',
                    }],
                    s: [{
                        value: '充能', label: '充能'
                    }],
                    b: [{
                        value: '元素伤', label: '元素伤'
                    }, {
                        value: '物伤', label: '物伤'
                    }],
                    g: [{
                        value: '治疗', label: '治疗'
                    }, {
                        value: '双暴', label: '双暴'
                    }],
                    f: [{
                        value: '生命%', label: '生命%',
                    }, {
                        value: '防御%', label: '防御%',
                    }, {
                        value: '生命', label: '生命',
                    }, {
                        value: '防御', label: '防御',
                    }, {
                        value: '攻击%', label: '攻击%',
                    }, {
                        value: '攻击', label: '攻击',
                    }, {
                        value: '精通', label: '精通',
                    }, {
                        value: '双暴', label: '双暴'
                    }, {
                        value: '充能', label: '充能'
                    }]
                },
                active_key,
                active_item,
                active_type,
                choose_role_show,
                choose_weapon_show,
                choose_artifact_show,
                computed_list,
                main_data,
                zhCN,
                dateZhCN,
            }
        }
    }
    const app = createApp(App)
    app.use(naive)
    app.mount('#app')
</script>
</body>
</html>
